<template>
	<view class="container">
		<!-- 分享的弹窗 -->
		<uni-popup :show="type === 'share'" position="bottom" mode="fixed" @hidePopup="togglePopup('')" style="position: relative;">
			<view class="uni-tip">
				<text class="uni-tip-content">分享到</text>
				<view class="uni-tip-group-button">
					<image src="../../static/r-1.png" style="width:80upx;height: 80upx;" @click="share(1)"></image>
					<image src="../../static/cir.png" style="width: 80upx;height: 80upx;margin-left: 60upx;" @click="share(2)"></image>
				</view>
			</view>
		</uni-popup>
		<view class="pageHeader">
			商品详情
			<a class="generalBack" @click="backpage()" hover-class="none">
			 <image src="/static/back.png" style="width: 18upx;height: 30upx;"></image>
			 </a>
			 <!-- <image src="../../static/share.png" style="width: 30upx;height: 30upx;position: absolute;bottom:50upx;right:30upx" @click="share(0)"></image> -->
		</view>
		<!-- 头部轮播 -->
		<view class="carousel">
			<swiper indicator-dots circular=true duration="400">
				<swiper-item class="swiper-item" v-for="(item,index) in goodsDetail.photo" :key="index">
					<view class="image-wrapper">
						<image
							:src="item.images" 
							class="loaded" 
							mode="aspectFill"
						></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		
		<view class="introduce-section">
			<view class="price-box" style="position: relative;">

				<text class="price">¥{{goodsDetail.price}}</text>
				<text style="font-size: 22upx;margin:0 12upx;" v-if="Number(goodsDetail.integral)>0">({{goodsDetail.integral}}VS)</text>
				<text style="position: absolute;color: #666;right:40upx;top:28upx">销量：{{goodsDetail.sales_count}}</text>
			</view>
			<view style="font-size: 26upx;color: #9999;"><text class="m-price">原价¥{{goodsDetail.original_price}}</text></view>
			<text class="title goods-info">{{goodsDetail.title}}</text>
			<view class="bot-row">
				<text>快递：免运费</text>
				<text>库存: {{goodsDetail.inventory}}</text>
				<text>浏览量: {{goodsDetail.access_count}}</text>

			</view>
		</view>
		
		<view class="c-list" v-if="specList.length>0">
			<view class="c-row b-b" @click="toggleSpec">
				<text class="tit">购买类型</text>
				<view class="con">
					<text class="selected-text" v-for="(sItem, sIndex) in specSelected" :key="sIndex" v-if="specSelected.length>0">
						{{sItem.name}}
					</text>
					<text v-else>可选规格</text>
				</view>
				<text class="yticon icon-you"></text>
			</view>
		</view>
		
		<view class="detail-desc">
			<view class="d-header">
				<text>宝贝详情</text>
			</view>
			<view v-for="(appitem,appindex) in goodsDetail.content_app" :key="appindex" >
				<image :src="appitem.images" mode="widthFix" style="width: 100%;"></image>
			</view>
		</view>
		<!-- 抢购底部操作菜单 -->
		<view class="page-bottom" v-if="is_qiang==true" style="height: auto;padding: 16upx 0;">
			<view class="qiang_left" style="font-size: 26upx;color: #666;padding-top: 16upx;">
				<view  class="flex jc-center" style="color: #666;margin-right: 40upx;" v-if="passitem.partake_num<passitem.min_rob">未达到指定抢购人数</view>
				<!-- <view class="flex aic" v-else>
					<image src="../../static/clock.png" style="width: 36upx;margin-right: 8upx;height: 34upx;"></image>
					<text>距离活动结束还有</text>
					<uni-countdown :show-day="false" :hour="0" :minute="0" :second="passitem.rob_minute" color="#FFFFFF" background-color="#EC6104" border-color="#EC6104" :show-colon="false" />
				</view> -->
				<view class="flex jc-center" style="margin: 6upx 0;padding-right: 10upx;padding-bottom: 10upx;">
					<view>
						单个红包金额:<text style="color: #EC6104;">{{passitem.red_envelopes}}</text>
					</view>
					<view style="margin-left: 20upx;">
						购买人数<text style="color: #EC6104;">{{passitem.partake_num}}</text>/{{passitem.max_rob}}
					</view>
				</view>
			</view>
			<view class="comediabuy" @click="toggleSpec(1)">立即购买</view>
		</view>
		<!-- 底部操作菜单 -->
		<view class="page-bottom" v-if="is_qiang==false">
			<navigator url="/pages/tab/index" open-type="switchTab" class="p-b-btn">
				<text class="iconfont icon-home"></text>
				<text style="margin-top: 4upx;">首页</text>
			</navigator>
			<view class="p-b-btn" :class="{active: goodsDetail.is_favor==1}" @click="toFavorite">
				<text class="iconfont icon-shoucang"></text>
				<text style="margin-top: 4upx;">收藏</text>
			</view>
			<navigator url="/pages/tab/shopcar" open-type="switchTab" class="p-b-btn">
				<text class="iconfont icon-shopcar"></text>
				<text style="margin-top: 4upx;">购物车</text>
			</navigator>
			
			<view class="action-btn-group">
				<button class="action-btn buynow" @click="toggleSpec(1)">立即购买</button>
				<button class="action-btn" @click="toggleSpec(2)">加入购物车</button>
			</view>
		</view>
	
		
		<!-- 规格-模态层弹窗 -->
		<view 
			class="popup spec" 
			:class="specClass"
			@touchmove.stop.prevent="stopPrevent"
			@click="toggleSpec"
		>
			<!-- 遮罩层 -->
			<view class="mask"></view>
			<view class="layer attr-content" @click.stop="stopPrevent">
				<view class="a-t">
					<image :src="goodsDetail.images"></image>
					<view class="right">
						<view class="price">¥{{Object.keys(goodtypeMsg).length==0?goodsDetail.price:goodtypeMsg.price}}
							<text v-if="Number(goodsDetail.integral)>0||Number(goodtypeMsg.integral)>0">/({{Object.keys(goodtypeMsg).length==0?goodsDetail.integral:goodtypeMsg.integral}}VS)</text>
						</view>
						<text style="font-size: 22upx;color: #999;text-decoration: line-through;margin-bottom: 14upx;">￥{{Object.keys(goodtypeMsg).length==0?goodsDetail.original_price:goodtypeMsg.original_price}}</text>
						<text class="stock" >库存：{{Object.keys(goodtypeMsg).length==0?goodsDetail.inventory:goodtypeMsg.inventory}} {{goodsDetail.inventory_unit}}</text>
						<!-- <view class="selected">
							已选：
							<text class="selected-text" v-for="(sItem, sIndex) in specSelected" :key="sIndex">
								{{sItem.name}}
							</text>
						</view> -->
					</view>
				</view>
				<view v-for="(item,index) in specList" :key="index" class="attr-list"  v-if="specList.length>0">
					<text>{{item.name}}</text>
					<view class="item-list">
						<!-- &&subIndex[index-1]!==-1  -->
						<text 
							v-for="(childItem, childIndex) in item.value" 
							:key="childIndex" class="tit" 
							:class="[{'selected':subIndex[index] == childIndex},{'avail': childItem.avail},{'noactive': childItem.noactive}]"
							@click="selectSpec(childItem.name,index,item.name,childIndex)"
						>
							{{childItem.name}}
						</text>
					</view>
				</view>
				<!-- 购买数量 -->
				<view style="margin-top:40upx ;padding-right: 40upx;" class="flex aic jsb">
					<text style="font-size: 28upx;color: #333;">购买数量</text>
					<view>
						<uni-number-box class="step"  :min="buymin" :max="buymax" :value="goodsnum"  :disabled="true" @eventChange="numberChange"></uni-number-box>
					</view>
				</view>
				<button class="btn" @click="buy">确认</button>
			</view>
		</view>
	</view>
</template>

<script>
	import postAjax from '../../API/postAjax.js'
	import uniNumberBox from '@/components/uni-number-box.vue'
 
	import uniPopup from '@/components/uni-popup/uni-popup.vue'

	export default{
		
		data() {
			return {

				mytoken:'',//token
				// 是否是油卡区过来的，
				isoil:false,
				specClass: 'none',
				type:'',
				// 产品详情
				goodsDetail:{},
				goodsId:null,
				// 从抢购区进来
				is_qiang:false,
				passitem:{},//抢购传过来的信息
				// 加入购物车还是立即购买
				dotype:0,
				goodsnum:1,
				buymin: 0, // 购买的最小值
				buymax: 0 ,//购买的最大值
				selectArr: [], //存放被选中的值
				shopItemInfo: {}, //存放要和选中的值进行匹配的数据
				subIndex: [], //是否选中 因为不确定是多规格还是单规格，所以这里定义数组来判断
				// 传递的数组信息
				postsub:[],
				// 默认选择的规格
				specSelected:[],

				confirmmsg:'',// 确认的信息

				shareList: [],

				specList: [
					
				],
				// 选择规格后的产品信息
				goodtypeMsg:{},
				passtype:''
			};
		},
		components: {
			uniNumberBox,
			uniPopup
		},
		onLoad(options){

			let that = this
			if(options.mystatus){
				that.isoil = options.mystatus=='899'
			}
			that.goodsId = options.id;
			that.mytoken = uni.getStorageSync('token')
			that.get_product_detail(options.id,that.mytoken)
			// if(options.type == 'quickbuy'){
			// 	that.is_qiang = true
			// 	that.passtype = options.type
			// 	that.passitem = JSON.parse(options.item)
			// }
		},
		methods:{
			// 返回上一页
			backpage(){
				uni.navigateBack({
					delta:1
				})
			},
			// 切换购买数量
			numberChange(data) {
				this.goodsnum = data.number
				
			},
			//规格弹窗开关
			toggleSpec(type) {
				let that = this
				that.dotype = type
				that.goodsnum =1
				if(that.specClass === 'show'){
					that.specClass = 'hide';
					setTimeout(() => {
						that.specClass = 'none';
					}, 250);
				}else if(that.specClass === 'none'){
					that.subIndex = []
					that.selectArr =[]
					that.postsub = []
					that.specList = that.specinit()
					that.specClass = 'show';
					
				}
			},

			// 选择规格

			async selectSpec(item,n,fname,index){//子name 父级index funame 子集index
				var self = this;
				
				if (self.selectArr[n] != item) {
					if(n==0){
						self.subIndex=[]
						self.selectArr=[]
						self.postsub=[]
						self.specList.forEach((litem,lindex)=>{
							if(lindex!==0){
								litem.value.forEach(fsd=>{
									self.$set(fsd, 'avail', false);
									self.$set(fsd, 'noactive', true);
								})
							}
						})
						
					}
					self.selectArr[n] = item;
					self.subIndex[n] = index;
					self.postsub[n] = {}
					self.postsub[n].type = fname
					self.postsub[n].value = item
					if(self.subIndex[n+1]!==undefined){
						self.subIndex.splice(n+1,self.subIndex.length-1-n)
					}
					if(self.selectArr[n+1]!==undefined){
						self.selectArr.splice(n+1,self.selectArr.length-1-n)
					}
					if(self.postsub[n+1]!==undefined){
						self.postsub.splice(n+1,self.postsub.length-1-n)
					}
					let postarr = self.postsub.filter((val,ind)=>{
						return Object.keys(val).length>0
					})
					let postdata = JSON.stringify(postarr)
					// 判断是否已经是底部了 
					if(n==self.specList.length-1){
						 self.confirmmsg = await self.get_type_detail(self.goodsDetail.id,postdata)
						if(self.confirmmsg!==''){
							self.goodtypeMsg = await self.get_type_detail(self.goodsDetail.id,postdata)
						}
					}else{
						let aboutMsg = await self.get_stype(self.goodsDetail.id,postdata)
						self.specList[n+1].value.forEach(item=>{
							if(aboutMsg.indexOf(item.name)!==-1){
								self.$set(item, 'avail', true);
								self.$set(item, 'noactive', false);
							}else{
								self.$set(item, 'noactive', true);
								self.$set(item, 'avail', false);
							}
						})

					}
					
				} else {
					
					self.selectArr[n] = ""
					// self.selectArr.splice(n,self.selectArr.length-1)
					// self.subIndex.splice(n,self.subIndex.length-1)
					// self.postsub.splice(n,self.postsub.length-1)
					self.postsub[n] = {}
					self.subIndex[n] = -1 //去掉选中的颜色
					
					// 判断是不是来回点击顶部信息
					if(n==0){
						self.subIndex=[]
						self.selectArr=[]
						self.postsub=[]
						self.specList.forEach((litem,lindex)=>{
							if(lindex!==0){
								litem.value.forEach(fsd=>{
									self.$set(fsd, 'avail', false);
									self.$set(fsd, 'noactive', true);
								})
							}
						})
					}else if(n!==self.specList.length-1){
						for(let a=0;a<self.subIndex.length;a++){
							if(self.subIndex[a]==-1){
								self.subIndex.splice(a,self.subIndex.length-a)
							}
						}
						for(let i=0;i<self.selectArr.length;i++){
							if(self.selectArr[i]==''){
								self.selectArr.splice(i,self.selectArr.length-i)
							}
						}
						for(let i=0;i<self.postsub.length;i++){
							if(Object.keys(self.postsub[i]).length==0){
								self.postsub.splice(i,self.postsub.length-i)
							}
						}
						self.specList[n+1].value.forEach(item=>{
							self.$set(item, 'avail', false);
							self.$set(item, 'noactive', true);
						})
					}
				}
				self.checkItem()
			},
			checkItem(){
				var self = this;
				var option = self.specList;
				var result = []; //定义数组储存被选中的值
				for (var i in option) {
					result[i] = self.selectArr[i] ? self.selectArr[i] : '';
				}
				for (var i in option) {
					var last = result[i]; //把选中的值存放到字符串last去
					for (var k in option[i].value) {
						result[i] = option[i].value[k].name; //赋值，存在直接覆盖，不存在往里面添加name值
						// option[i].item[k].isShow = self.isMay(result); //在数据里面添加字段isShow来判断是否可以选择
					}
					result[i] = last; //还原，目的是记录点下去那个值，避免下一次执行循环时被覆盖
				}
				self.$forceUpdate(); //重绘
			},
			// 初始化规格
			specinit(){
				let that = this
				that.specList.forEach((litem,lindex)=>{
					if(lindex!==0){
						litem.value.forEach(fsd=>{
							that.$set(fsd, 'selected', false);
							that.$set(fsd, 'noactive', true);
							that.$set(fsd, 'avail', false);
						})
					}else{
						litem.value.forEach(fsd=>{
							that.$set(fsd, 'avail', true);
							that.$set(fsd, 'noactive', false);
						})
					}
				})
				return that.specList
			},
			// 商品规格类型
			get_stype(id,spc){
				return new Promise((resolve, reject) => {
					postAjax('goods/SpecType',{
						id:id,
						spec:spc
					},function(data){
						if(data.code==0){
							resolve(data.data)
						}else{
							uni.showToast({
								icon:'none',
								title:data.msg
							})
						}
					})
				})
			},
			// 选择规格后的商品详情
			get_type_detail(id,spc){
				return new Promise((resolve, reject) => {
					postAjax('goods/specdetail',{
						id:id,
						spec:spc
					},function(data){
						if(data.code==0){
							resolve(data.data)
						}else{
							uni.showToast({
								icon:'none',
								title:data.msg
							})
						}
					})
				})
			},
			//收藏
			toFavorite(){
				let that = this
				that.goodsDetail.is_favor = !that.goodsDetail.is_favor
				postAjax('goods/Favor',{
					id:that.goodsDetail.id,
					token:that.mytoken
				},function(data){
					uni.showToast({
						icon:'none',
						title: data.msg						
					})
				})
			},
			// 产品详情
			get_product_detail(id,token){
				let that = this
				postAjax('goods/Detail',{
					goods_id:id,
					token:token
				},function(data){
					that.goodsDetail = data.data.goods
					console.log(that.goodsDetail)
					if(that.goodsDetail.type==2){
						that.is_qiang = true
						that.passitem = data.data.goods
					}
					that.subIndex=[]
					that.selectArr=[]
					that.postsub=[]
					that.specList = data.data.goods.specifications.choose
					that.buymin = that.goodsDetail.buy_min_number > 0 ? Number(that.goodsDetail.buy_min_number) : 1
					that.buymax = that.goodsDetail.buy_max_number > 0 ? Number(that.goodsDetail.buy_max_number) : 10000
					if(that.specList.length>0&&that.specList[0].value.length>0){
						// 规格初始化 只能点击最上层的
						that.specList.forEach((litem,lindex)=>{
							if(lindex!==0){
								litem.value.forEach(fsd=>{
									that.$set(fsd, 'selected', false);
									that.$set(fsd, 'noactive', true);
								})
							}else{
								litem.value.forEach(fsd=>{
									that.$set(fsd, 'avail', true);
									that.$set(fsd, 'noactive', false);
								})
							}
						})
					}
				})
			},
			buy(){
				let that = this
				if(that.confirmmsg==''&&that.specList.length>0){
					that.specClass = 'none'
					return
				}
				if(that.dotype==2){
					let cartdata = {
						token:that.mytoken,
						stock:that.goodsnum,
						goods_id:that.goodsDetail.id,
						spec:JSON.stringify(that.postsub)
					}
					// 加入购物车
					postAjax('Cart/Save',cartdata,function(data){
						uni.showToast({
							icon:'none',
							title: data.msg						
						})
						that.specClass = 'none';
					})
				}else{
					let  linkurl = '/pages/order/index?good_id='+that.goodsDetail.id+'&num='+that.goodsnum+'&type=goodetail&spec='+JSON.stringify(that.postsub)
					if(that.is_qiang){
						linkurl+= '&is_qiang=1'
					}
					if(that.isoil){
						linkurl+= '&is_oil=1'
					}
					uni.navigateTo({
						url: linkurl
					})
				}
			},
			// 分享到wx 朋友圈 
			togglePopup(type) {
				this.type = type;
			},
			share(type){
				let that = this
				let tit = that.goodsDetail.title
				if(type==0){
					that.type='share'
				}
				if(type==1){
					uni.share({
					    provider: "weixin",
					    scene: "WXSceneSession",
					    type: 0,
					    href: "http://www.baidu.com/",
					    title: '三道咨询',
					    summary: tit,
					    imageUrl: that.goodsDetail.images,
					    success: function (res) {
					        console.log("success:" + JSON.stringify(res));
							that.type=''
					    },
					    fail: function (err) {
					        console.log("fail:" + JSON.stringify(err));
					    }
					});
				}
				if(type==2){
					uni.share({
					    provider: "weixin",
					    scene: "WXSenceTimeline",
					    type: 1,
					    summary: tit,
					    success: function (res) {
					        console.log("success:" + JSON.stringify(res));
							that.type=''
					    },
					    fail: function (err) {
					        console.log("fail:" + JSON.stringify(err));
					    }
					});
				}
			},
			stopPrevent(){}
		},

	}
</script>

<style>
	page{
		background: #f8f8f8;
		padding-bottom: 160upx;
		font-size: 26upx;
	}
	
	.uni-tip {
		/* #ifndef APP-NVUE */
		display: flex;
		flex-direction: column;
		/* #endif */
		padding: 10upx 0;
		width: 100%;
		background-color: #fff;
		border-radius: 10px 10upx 0 0 ;
	}
	
	.uni-tip-title {
		text-align: center;
		font-weight: bold;
		font-size: 16px;
		color: #333;
	}
	
	.uni-tip-content {
		padding: 10upx 0;
		text-align: center;
		font-size: 16px;
		color: #666;
	}
	
	.uni-tip-group-button {
		/* #ifndef APP-NVUE */
		display: flex;
		justify-content: center;
		/* #endif */
		padding: 15px 0;
		border-top: 1px solid #eee
	}
	
	.uni-tip-button {
		flex: 1;
		text-align: center;
		font-size: 14px;
		color: #3b4144;
	}
	.pageHeader{position: fixed;top:0;left:0;z-index:999;width: 100%;
	height: 128upx;background-color: #fff;line-height: 128upx;text-align: center;font-size: 36upx;color: #333;padding-top: 40upx;}
	.generalBack{position: absolute;top:40upx;left:30upx;display: block;}
	.icon-you{
		font-size: 30upx;
		color: #888;
	}
	.carousel {
		height: 588upx;
		padding-top: 168upx;
		position:relative;
	}
	swiper{
		height: 100%;
	}
	.image-wrapper{
		width: 100%;
		height: 100%;
	}
	.swiper-item {
		display: flex;
		justify-content: center;
		align-content: center;
		height: 588upx;
		overflow: hidden;
	}
	.swiper-item image {
		width: 100%;
		height: 100%;
	}
	/* 标题简介 */
	.introduce-section{
		background: #fff;
		padding: 20upx 30upx;
		
	}
	.goods-info{overflow:hidden; text-overflow:ellipsis;display:-webkit-box; -webkit-box-orient:vertical;-webkit-line-clamp:2;}
	.title{
		font-size: 30upx;
		color: #333;
		margin: 16upx 0;
		line-height: 1.75;
	}
	.price-box{
		display:flex;
		align-items:baseline;
		padding-top: 10upx;
		font-size: 26upx;
		color:#EC6104;
	}
	.price{
		font-size: 34upx;
	}
	.m-price{
		text-decoration: line-through;
	}
	.coupon-tip{
		align-items: center;
		padding: 4upx 10upx;
		background: #fa436a;
		font-size: 24upx;
		color: #fff;
		border-radius: 6upx;
		line-height: 1;
		transform: translateY(-4upx); 
	}
	.bot-row{
		display:flex;
		align-items:center;
		height: 50upx;
		font-size: 26upx;
		color: #666;
	}
	.bot-row text{
		flex: 1;
	}
	
	.c-list{
		font-size: 26upx;
		color: #606266;
		background: #fff;
		
	}
	.c-row{
		display:flex;
		align-items:center;
		padding: 20upx 30upx;
		position:relative;
	}
	.tit{
		width: 140upx;
	}
	.con{
		flex: 1;
		color: #303133;
		
	}
	.selected-text{
		margin-right: 10upx;
	}
	.bz-list{
		height: 40upx;
		font-size: 26upx;
		color: #303133;
		
	}
	.bz-list text{
		display: inline-block;
		margin-right: 30upx;
	}
	.con-list{
		flex: 1;
		display:flex;
		flex-direction: column;
		color: #303133;
		line-height: 40upx;
	}
	.red{
		color: #fa436a;
	}
	/*  详情 */
	.detail-desc{
		background: #fff;
		margin-top: 16upx;
		
	}
	.d-header{
		display: flex;
		justify-content: center;
		align-items: center;
		height: 80upx;
		font-size: 30upx;
		color: #303133;
		position: relative;
	}
	.d-header text{
		padding: 0 20upx;
		background: #fff;
		position: relative;
		z-index: 1;
	}
	.d-header:after{
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translateX(-50%);
		width: 300upx;
		height: 0;
		content: '';
		border-bottom: 1px solid #ccc; 
	}
	/* 规格选择弹窗 */
	.attr-content{
		padding: 10upx 30upx;
		width: 100%;
	}
	.attr-list{
		display: flex;
		flex-direction: column;
		font-size: 32upx;
		color: #606266;
		padding-top: 30upx;
		padding-left: 10upx;
	}
	.item-list{
		padding: 20upx 0 0;
		display: flex;
		flex-wrap: wrap;
	}
	.item-list text{
		display: flex;
		align-items: center;
		justify-content: center;
		background: #f5f5f5;
		margin-right: 20upx;
		margin-bottom: 20upx;
		border-radius: 4upx;
		min-width: 60upx;
		height: 60upx;
		padding: 0 20upx;
		font-size: 28upx;
		border:2upx solid #f5f5f5;
		color: #b4b3b3 ;
		/* pointer-events: none; */
	}
	.item-list text.avail{
		background: #fff;
		border:2upx solid #303133;
		color: #303133;
		/* cursor: pointer; */
	}
	.item-list text.noactive{
		pointer-events: none;
	}
	.item-list text.selected{
		background: #fff;
		border:2upx solid #EC6104;
		background-color:#EC6104 ;
		color: #fff;
		/* cursor: pointer; */
	}
	.a-t{
		display: flex;
		
	}
	.a-t image{
		width: 170upx;
		height: 170upx;
		flex-shrink: 0;
	}
	.right{
		display: flex;
		flex-direction: column;
		padding-left: 24upx;
		font-size: 26upx;
		color: #606266;
		line-height: 42upx;
		
	}
	.right .price{
		font-size: 32upx;
		color:#EC6104;
		margin-bottom: 10upx;
	}
	.selected-text{
		margin-right: 10upx;
	}
	/*  弹出层 */
	.popup {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 99;
	}
	.mask{
		position: fixed;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
		background-color: rgba(0, 0, 0, 0.4);
	}
	.layer {
		position: fixed;
		z-index: 99;
		bottom: 0;
		/* min-height: 40vh; */
		border-radius: 10upx 10upx 0 0;
		background-color: #fff;
	}
	.layer .btn{
		height: 66upx;
		line-height: 66upx;
		background: #EC6104;
		width: 456upx;
		font-size: 30upx;
		color: #fff;
		margin: 60upx auto 20upx;
	}
	@keyframes showPopup {
		0% {
			opacity: 0;
		}
		100% {
			opacity: 1;
		}
	}
	@keyframes hidePopup {
		0% {
			opacity: 1;
		}
		100% {
			opacity: 0;
		}
	}
	@keyframes showLayer {
		0% {
			transform: translateY(120%);
		}
		100% {
			transform: translateY(0%);
		}
	}
	@keyframes hideLayer {
		0% {
			transform: translateY(0);
		}
		100% {
			transform: translateY(120%);
		}
	}
	.popup.show {
		display: block;
	}
	.popup.show .mask{
		animation: showPopup 0.2s linear both;
	}
	.popup.show .layer{
		animation: showPopup 0.2s linear both;
	}
	.popup.hide .mask{
		animation: hidePopup 0.2s linear both;
	}
	.popup.hide .layer {
		animation: hideLayer 0.2s linear both;
	}
	.popup.none {
		display: none;
	}
	.comediabuy{padding:20upx 40upx;color: #fff;background-color: #EC6104;border-radius:6upx 0  0 6upx;}
	/* 底部操作菜单 */
	.page-bottom{
		position:fixed;
		width: 100%;
		left: 0;
		right: 0;
		bottom:0;
		z-index: 95;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100upx;
		background: #fff;
	}
	.p-b-btn{
		display:flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 24upx;
		color: #606266;
		width: 104upx;
		height: 80upx;
	}
	.p-b-btn.active,.p-b-btn.active .yticon{
		color: #ec6104;
	}


	.action-btn-group{
		display: flex;
		height: 76upx;
		border-radius: 10upx;
		overflow: hidden;
		box-shadow: 0 20upx 40upx -16upx #fa436a;
		box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
		background: linear-gradient(to right, #FDBA0E,#EC6104);
		margin-left: 20upx;
		position:relative;
		
	}
	.action-btn{
		text-align: center;
		display: inline-block;
		width: 180upx;
		height: 100%;
		line-height: 76upx;
		font-size: 28upx;
		color: #fff;
		padding: 0;
		border-radius: 0;
		background: transparent;
	}
	.action-btn::after{border: none;}
	.buynow{position: relative;}
	.buynow::after{content: '';width: 2upx;height: 150%;background-color: #f4c04d;position: absolute;right: 0;top:12%;left: auto;}
</style>
